<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/echarts.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="dv1" style="width: 800px;height:600px;"></div>
<script>
// 1.基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('dv1'));
// 2.指定图表的配置项和数据
var option = {
title: {
text: '房间类型预定统计'
},
tooltip: {},
legend: {
data: ['已预定房间数']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: { readOnly: false },
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
}
},
xAxis: {//x轴
data: []
//['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '孩子数量',
type: 'bar',
data: []
    //[5, 20, 36, 10, 10, 20]
}
]
};
//3.使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//ajax 请求接口
$.get("/api/roomstatus/echarts.do",function(res){
    console.log(res)
    if(res.code==200){
        option.xAxis.data=res.data.roomtype;
        option.series[0].data=res.data.reserveroomnumber;
        myChart.setOption(option);
    }

})
</script>
</body>
</html>